<template>
  <div class="container">
    <leftmenu></leftmenu>
    <headerinfo></headerinfo>
    <div class="header">
      <spglheader @mode="changeModel"></spglheader>
    </div>
    <div class="main">
      <div class="item-classfiy" v-for="i in options" :key="i">
        <div class="item-left">
          <span> {{i.name}} </span>
        </div>
        <div class="item-right">
          <span class="item-title">商品</span>
          <span class="a">已有个数</span>
          <span class="count">{{i.id}}</span>
        </div>
      </div>
      <div class="add" @click="dialogForClassify = true">
        <i class="el-icon-plus"></i>
        <span class="addclassify">新增分类</span>
      </div>
      <!-- <div class="bottom">
        <el-button>保存</el-button>
        <el-button type="danger">取消</el-button>
      </div> -->
    </div>
    <div class="dialog">
      <el-dialog title="新增分类" :visible.sync="dialogForClassify">
        <el-select placeholder="请选择" v-model="value">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
        <br>
        <el-button @click="addCategory()">确认</el-button>
        <el-button type="danger" @click="dialogForClassify=false">取消</el-button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      dialogForClassify: false,//控制弹出的窗口是否可见。
      isSeen: true,
      value: "",//添加的分类的名称。
      options: [],//商品分类的列表。
      category:'',
      id:''

    };
  },
  mounted(){
    this.getAllCategory()
  },
  methods: {
    changeModel(childSeen) {
      // console.log(childSeen);
      this.isSeen = !childSeen;
    },
    getAllCategory(){
      axios.get('/categorys').then((res)=>{
        console.log(res)
        this.options=res.data.extend.all
        console.log(this.options)
      })
    },
    addCategory(){
      this.dialogForClassify=false;
      axios.get
    }
  },
};
</script>

<style scoped>
.addclassify {
  position: absolute;
  top: 40%;
  left: 57%;
  font-size: 23px;
}
.el-icon-plus:before {
  content: "\e62b";
  font-size: 100px;
  color: whitesmoke;
  cursor: pointer;
  position: absolute;
  background-color: #ccc;
  border-radius: 20%;
  height: 100%;
  width: 50%;
  top: 0%;
}
.add {
  overflow: hidden;
  position: absolute;
  /*border: 2px solid black;*/
  top: 69%;
  left: 67%;
  width: 18%;
  height: 19%;
  border-radius: 20%;
}
.bottom {
  position: absolute;
  top: 91%;
  left: 10%;
  /* font-size: 10px; */
}
.count {
  position: relative;
  top: 71%;
  left: -45%;
  font-size: 25px;
}

.a {
  position: relative;
  display: inline-block;
  left: 20%;
  top: 50%;
  color: #ccc;
}
.item-right {
  position: relative;
}

.item-classfiy .item-right .item-title {
  position: absolute;
  top: 12%;
  left: 17%;
  font-size: 30px;
}
.item-classfiy .item-left span {
  position: absolute;
  top: 40%;
  left: 50px;
}
.item-classfiy .item-left {
  width: 40%;
  height: 100%;
  position: relative;
  background-color: #ccc;
  border-radius: 20%;
}
.item-classfiy {
  overflow: hidden;
  border-radius: 18%;
  display: flex;
  float: left;
  width: 18%;
  margin-left: 10%;
  margin-top: 5%;
  height: 18%;
  border: 2px solid black;
  /* background-color: antiquewhite; */
}
.main {
  border: 1px solid brown;
  width: 83%;
  height: 77%;
  position: absolute;
  top: 22%;
  left: 16%;
}
.container {
  border: 1px solid pink;
}
.header {
  /* border: 1px solid pink; */
  width: 83%;

  height: 12%;
  top: 10%;
  left: 16%;
  position: absolute;
  background-color: white;
}
</style>
